<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="box">
    你好
    <ul>
      <li>5月1号喝酒</li>
      <li class="hot">5月2号喝酒</li>
      <li>5月3号喝酒</li>
      <li class="hot">5月4号喝酒</li>
      <li>5月5号检查身体</li>
    </ul>
  </div>
  <h1 class="list">今天星期五</h1>
  <h2 class="tip">明天放假</h2>
  <div id="cc">
    <div>
      儿子
      <div>
        孙子
      </div>
    </div>
  </div>
  <script src="./jquery-3.4.1.min.js"></script>
  <script>
    // var box = document.getElementById("")
    // window.onload = function () { } //页面加载完成做什么 文档dom元素，外链的css和js 都要加载完成

    // $(document).ready(function () { }) //只是dom加载完成
    // jQuery(function () { })
    $(function () {  //文档加载完成的简写

      var box = document.getElementById("box")
      var box = document.querySelector("#box")
      // 设置一个css    $("#box").css("属性", "属性值")
      $("#box").css("color", "red")
      $("#box").css({
        "color": "gold",
        "font-size": "30px",
        background: "purple"
      })
      // jq元素 和 原生元素 之间的方法不能混用  
      // $("#box").style.color = "red" //错误

      $(".hot").css({ background: "red", "font-size": "30px" });
      $("#box li").css({
        "text-decoration": "line-through"
      })
      $("*").css({
        margin: 0,
        padding: 0
      })
      $(".list,.tip").css({
        color: "red"
      })
    })
    // 
    $("#cc>div").css({ width: "300px", height: "300px", background: "red" })



  </script>
</body>

</html>